<template>
  <div class="edit-container">
    <img class="bg-div" src="../../../static/img/editBg.jpg"/>
    <section class="edit-content">
      <article class="form-edit-wrap">
        <div class="form-main">
          <section class="form-content" @mouseover="showVertical" @mouseout="hidedVertical">
            {{items}}
            <happy-scroll hide-horizontal :hide-vertical="hideVertical" resize>
              <div class="form-fields">
                <SortableList lockAxis="y" v-model="items" :useDragHandle="true">
                  <SortableItem v-for="(item, index) in items"
                    :index="index" :key="item.id"
                    :isSelected="selectedId === item.id"
                    :item="item"
                    @changeItemId="chooseItem"
                    @deleteItem="deleteItem"
                    @cloneItem="cloneItem"
                    @setItemOptions="setItemOptions"
                    @editTitle="editTitle"/>
                </SortableList>
              </div>
            </happy-scroll>
          </section>
        </div>
        <aside class="form-aside">
          <div class="fileds-bar">
          <component-box></component-box>
          </div>
        </aside>
      </article>
    </section>
  </div>
</template>

<script>
import ComponentBox from './componentBox'
import SortableList from './editBox'
import SortableItem from '../../editComponents/inputField'
import { getArrayIndex, randomString } from '@/assets/utils/utils.js'
export default {
  data () {
    return {
      hideVertical: true,
      selectedId: 'item1',
      activeIndex: -1,
      items: [
        {
          id: 'item1',
          title: '姓名1',
          options: []
        },
        {
          id: 'item2',
          title: '姓名2',
          options: ['必填', '不能重复', '隐藏']
        }
      ]
    }
  },
  components: {
    ComponentBox,
    SortableList,
    SortableItem
  },
  methods: {
    showVertical () {
      this.hideVertical = false
    },
    hidedVertical () {
      this.hideVertical = true
    },
    chooseItem (value) {
      this.selectedId = value
      this.activeIndex = getArrayIndex(value, this.items)
    },
    deleteItem (value) {
      this.$confirm('此操作将删除该组件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let deleteIndex = getArrayIndex(value, this.items)
        this.items.splice(deleteIndex, 1)
        console.log('delete', deleteIndex)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    cloneItem (value) {
      let cloneIndex = getArrayIndex(value, this.items)
      let newItem = Object.assign({}, this.items[cloneIndex])
      newItem.id = randomString(8)
      newItem.options = []
      this.items.splice(cloneIndex + 1, 0, newItem)
      this.selectedId = newItem.id
    },
    setItemOptions (value) {
      this.items[this.activeIndex].options = value
    },
    editTitle (value) {
      this.items[this.activeIndex].title = value
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../assets/less/edit/index.less');
</style>
